import { Tabs } from 'antd';
import React, { useEffect, useState } from 'react'
import './SectabStyle.css'
import { } from '@ant-design/icons';
import { getDynamic, getNew } from '../api/community'
import ComItem from './ComItem'

const { TabPane } = Tabs;

const Demo = () => {
  let [data1, setData1] = useState([])
  let [data2, setData2] = useState([])
  let [data3, setData3] = useState([])
  let [data4, setData4] = useState([])
  let [data5, setData5] = useState([])
  let [data6, setData6] = useState([])
  let { activeKey, setActiveKey } = useState(0)
  useEffect(() => {
    const fetchData = async () => {
      const result1 = await getDynamic({
        label: '推荐',
        page: 1,
        pagesize: 100
      });
      setData1(result1.data);
      const re2 = await getDynamic({
        label: '市场',
        page: 1,
        pagesize: 100
      });
      setData2(re2.data);
      const re3 = await getDynamic({
        label: '穿搭',
        page: 1,
        pagesize: 100
      });
      setData3(re3.data);
      const re4 = await getDynamic({
        label: '开箱',
        page: 1,
        pagesize: 100
      });
      setData4(re4.data);
      const re5 = await getNew({});
      setData5(re5.data);
      const re6 = await getDynamic({
        label: '附近',
        page: 1,
        pagesize: 100
      });
      setData6(re6.data);

      // console.log(data1,'1')
      // console.log(data2,'2')
      // console.log(data3,'3')
      // console.log(data4,'4')
      // console.log(data5,'5')
      // console.log(data6,'6')
    };
    fetchData();
  }, [])
  return (
    <div className="jojo">
      <Tabs
        forceRender={true}
        animated={true}
        centered={true}
      >
        <TabPane tab="推荐" key="1">
          {
            data1.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="市场" key="2">
        {
            data2.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="穿搭" key="3">
        {
            data3.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="开箱" key="4">
        {
            data4.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="最新" key="5">
        {
            data5.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="附近" key="6">
        {
            data6.map(el => <ComItem {...el}></ComItem>)
          }
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Demo